<script setup lang="ts">
import type { BlogCollectionItem, DailyCollectionItem } from '@nuxt/content';
import { formatDate } from '~/shared/utils/date.util';

useSeoMeta({
  title: 'iamcola\' daily.',
});


const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const skip = computed(() => (page.value - 1) * pageSize.value);

type ExtendedBlogCollectionItem = BlogCollectionItem & {
  weather: string;
};
const dailyList = ref<Pick<DailyCollectionItem, keyof ExtendedBlogCollectionItem>[]>([]);

type BlogKeys = keyof ExtendedBlogCollectionItem;
const selectFields: BlogKeys[] = ['id', 'title', 'description', 'date', 'path', 'seo', 'weather', 'body'];

const getDailyList = async (pageSize: number, skip: number) => {
  const res = await useAsyncData(
      () => queryCollection('daily')
        .select(...selectFields)
        .limit(pageSize)
        .skip(skip)
        .order('date', 'DESC')
        .all()
  );

  if (!res.data.value) {
    return [];
  }
  return  res.data.value;
};


const initDailyList = async () => {
  const _data = await getDailyList(pageSize.value, skip.value);

  dailyList.value = _data;
};
initDailyList();

const onChangePage = async (_page: number) => {
  page.value = _page;
  initDailyList();
};

</script>

<template>
  <div>
    <div class="pb-6">
      <div
        v-for="(item, idx) in dailyList"
        :key="idx"
        class="py-4 shadow-md border-dashed border-amber-300"
        :class="[idx === dailyList.length - 1 ? 'border-none' : 'border-b']"
      >
        <div class="flex justify-between items-center max-lg:flex-col max-lg:items-start">
          <h1 class="text-md font-bold">{{ item.title }}</h1>
          <div class="flex items-center max-lg:justify-end max-lg:mt-2">
            <p class="text-sm">{{ formatDate(item.date) }}</p>
            <p class="text-sm ml-4">天气：{{ item.weather }}</p>
          </div>
        </div>
        <div class="text-neutral-300 text-sm mt-4">
          <ContentRenderer v-if="item" :value="item" class="markdown-page daily-markdown" />
        </div>
      </div>
    </div>
    <PageComp
      v-if="total > pageSize"
      :page="page"
      :page-size="pageSize"
      :total="total"
      @on-change="onChangePage"
    />
  </div>
</template>

<style lang="scss">
@use "~/assets/css/markdown/style.scss";
</style>